<template>
  <div class="ui bottom attached active tab segment" id="showuser" data-tab="alluser">
    <div class="ui center aligned middle grid">
      <div class="four wide column" v-for="user in userlist" :key="user.id">
        <div class="ui card">
          <div class="content">
            <div class="ui two column left aligned grid">
              <div class="six wide column header">用户名</div>
              <div class="ten wide column">{{user.name}}</div>
            </div>
          </div>
          <div class="extra content">
            <div class="ui two buttons">
              <div name="change" @click="changeuser(user.id)" class="ui basic green button">修改</div>
              <!--<button name="delete" class="ui basic red disabled button">删除</button>-->
              <button
                name="delete"
                @click="deleteusermodal(user.id)"
                v-bind:class="{ 'disabled':curuser(user.name) }"
                class="ui basic red button"
              >删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <sui-modal v-model="open">
      <sui-modal-header>Confirm</sui-modal-header>
      <sui-modal-content>
        <sui-modal-description>
          <sui-header>删除用户</sui-header>
          <p>确定要删除该用户吗？</p>
          <p>该操作无法恢复</p>
        </sui-modal-description>
      </sui-modal-content>
      <sui-modal-actions>
        <sui-button inverted positive @click.native="deleteuser">OK</sui-button>
        <sui-button inverted negative @click.native="toggle">cancel</sui-button>
      </sui-modal-actions>
    </sui-modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getlist, deleteuserapi } from "@/api/user";
import { deleteJsonfromarray } from "@/utils/utils";
export default {
  computed: {
    ...mapState(["user"]),
  },
  data() {
    return {
      userlist: {},
      errors: {},
      open: false,
      deleteuserid: {},
    };
  },
  methods: {
    changeuser(id) {
      this.$router.push({path:'/main/changeuser',query:{ id}});
      this.user.changeid = id 
      this.$store.commit('setUser', this.user)
    },
    async deleteuser() {
      console.log("done");
      console.dir(this.userlist);
      try {
        let deledata = { id: this.deleteuserid, reassign: "2", force: "true" };
        let auth = this.user.auth;
        console.log(deledata);
        const { data } = await deleteuserapi(auth, deledata);
        console.log(data);
        deleteJsonfromarray(this.userlist, this.deleteuserid);
        console.dir(this.userlist);
      } catch (error) {
        console.dir(error);
      }
    },
    toggle() {
      this.open = !this.open;
    },
    curuser(id) {
      return this.user.id === id;
    },
    deleteusermodal(id) {
      console.log(id);
      this.open = !this.open;
      this.deleteuserid = id;
    },
  },
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error,
  }) {

    const auth = store.state.user.auth;
    try {
      const { data } = await getlist(auth);
      console.log(data);
      return { userlist: data };
    } catch (error) {}
  },
};
</script>

<style>
</style>